<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制图形</title>
</head>
<body>
直线：
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas><br/>
矩形：
<canvas id="myCanvas2" width="200" height="100" style="border: 1px solid #c3c3c3"></canvas><br/>
圆形：
<canvas id="myCanvas3" width="200" height="100" style="border: 1px solid #c3c3c3"></canvas><br/>
渐变：
<canvas id="myCanvas4" width="200" height="100" style="border: 1px solid #c3c3c3"></canvas><br/>
<script type="text/javascript">

    var c1=document.getElementById("myCanvas1");
    var cxt1=c1.getContext("2d");
    cxt1.moveTo(10,10);
    cxt1.lineTo(150,50);
    cxt1.lineTo(10,50);
    cxt1.stroke();

    var c2=document.getElementById("myCanvas2");
    var cxt2=c2.getContext("2d");
    cxt2.fillStyle="#FF0000";
    cxt2.fillRect(0,0,150,75);

    var c3=document.getElementById("myCanvas3");
    var cxt3=c3.getContext("2d");
    cxt3.fillStyle = "#ff0000";
    cxt3.beginPath();
    cxt3.arc(70,18,15,0,Math.PI*2,true);
    cxt3.closePath();
    cxt3.fill();

    var c=document.getElementById("myCanvas4");
    var cxt=c.getContext("2d");
    var grd=cxt.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,175,50);

</script>
</body>
</html>